import { useEffect, useState } from 'react'
import './ChildrenPage.scss'
import { localGetChildrenList } from '@/apis/parent'
import ChildrenItem from './component/ChildrenItem/ChildrenItem';
import { useDispatch, useSelector } from 'react-redux';
import { fetchGetChildrenList } from '@/store/modules/parent';
import { Button, Modal, ConfigProvider, Input, message, InputNumber, Empty } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { addChildrenAPI } from '@/apis/parent';

export default function ChildrenPage() {
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const { childrenList } = useSelector(state => state.parent);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const [newTelephone, setNewTelephone] = useState('');
    const [newPasssword, setNewPasssword] = useState('');
    // const [childrenList, setChildrenList] = useState([]);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const colorBox = [
        {
            dark: '#ee4863',
            light: '#f8b37f'
        },
        {
            dark: '#1781b5',
            light: '#0eb0c9'
        },
        {
            dark: '#55bb8a',
            light: '#bacf65'
        },
        {
            dark: '#61649f',
            light: '#c08eaf'
        },
    ]

    const handleAddChildren = async () => {
        setLoading(true);
        const res = await addChildrenAPI({
            "telephone": newTelephone,
            "userpassword": newPasssword
        },user_status.token);
        console.log(res);
        setLoading(false);
        setIsModalOpen(false);
        window.location.reload();

    }

    const handleCancelAddChildren = () => {
        setIsModalOpen(false);
    }


    useEffect(() => {
        async function getChilrenList() {

            dispatch(fetchGetChildrenList(user_status.token));
            // const res = await localGetChildrenList();
            // setChildrenList(res.data);
        }

        getChilrenList();
    }, [])



    return (
        <div className="ChildrenPage">
            {
                childrenList.length === 0 ||
                childrenList.map((ele, index) =>
                    <ChildrenItem key={index} info={ele} colorBox={colorBox[index % 4]} />
                )
            }
            <ConfigProvider
                theme={{
                    token: {
                        // Seed Token，影响范围大
                        colorPrimary: '#2486b9',
                        borderRadius: 5,

                        // 派生变量，影响范围小
                        // colorBgContainer: '#f6ffed',
                    },
                }}
            >
                <Button
                    type="primary"
                    onClick={showModal}
                    className='add-children'
                >
                    <PlusOutlined />
                </Button>
                <Modal
                    title={<h3>添加孩子</h3>}
                    open={isModalOpen}
                    onCancel={handleCancelAddChildren}
                    footer={[
                        <Button key="back" onClick={handleCancelAddChildren}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={handleAddChildren}>
                            确定
                        </Button>
                    ]}
                    centered
                    width={480}
                >
                    <label htmlFor='newTelephone'>请输入添加孩子的手机号</label>
                    <Input id='newTelephone' onInput={function (e) { setNewTelephone(e.target.value) }} value={newTelephone} />

                    <label htmlFor='Passsword'>请输入添加孩子的密码</label>
                    <Input id='Passsword' onInput={function (e) { setNewPasssword(e.target.value) }} value={newPasssword} />

                </Modal>
            </ConfigProvider>
        </div>
    )
}